<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>列表渲染综合</title>
</head>
<body>
  <div id="listRender">
    <div>
      <h2>操作</h2>
      搜索： <input type="text" v-model="searchValue">
      <br>
      排序：
      <button @click="sortList(1)">年龄升序</button>
      <button @click="sortList(2)">年龄降序</button>
      <button @click="sortList(0)">恢复默认</button>
    </div>
    <div>
      <h2>列表</h2>
      <ul>
        <li v-for="(p, index) in filterPersons" :key="index">
          {{p.name}} -- {{p.age}} -- 
          <button @click="edit(index)">修改</button>
          <button @click="deleteData(index)">删除</button>
        </li>
      </ul>
    </div>
    <div v-show="showUpdate">
      <h2>更新</h2>
      name <input type="text" v-model="updateData.name">
      age <input type="text" v-model="updateData.age">
      <button @click="update(index)">确认修改</button>
    </div>
    <div>
      <h2>添加</h2>
      name <input type="text" v-model="addData.name">
      age <input type="text" v-model="addData.age"  @keydown.enter="add()">
      <button @click="add">添加</button>
    </div>
  </div>

  <script src="../vue.js"></script>
  <script>
    new Vue({
      el: '#listRender',
      data: {
        searchValue: '',
        sortNum: 0,
        updateData: {
          id: undefined,
          name: '',
          age: undefined
        },
        addData: {
          name: '',
          age: undefined
        },
        showUpdate: false,
        persons: [
          {
            name: 'Jack',
            age: 20
          },
          {
            name: 'Mary',
            age: 28
          },
          {
            name: 'Tom',
            age: 33
          }
        ]
      },
      computed: {
        filterPersons() {
          const { persons, sortNum, searchValue} = this
          let arr = [...persons]
          // 搜索
          if(searchValue.trim()) {
            arr = persons.filter(p => p.name.toUpperCase().indexOf(searchValue.toUpperCase())!==-1)
          }
          // 排序
          if (sortNum == 1) {
            arr.sort((p1, p2) => p1.age - p2.age)
          }else if(sortNum == 2) {
            arr.sort((p1, p2) => p2.age - p1.age)
          }
          return arr
        }
      },
      methods: {
        sortList(id) {
          this.sortNum = id
        },
        add(){
          const {addData } = this
          if(addData.name !== '' && addData.age != undefined) {
            this.persons.push({...addData})
            this.addData.name = ''
            this.addData.age = undefined
          }
        },
        edit(index){
          this.showUpdate = true
          const {name, age} = this.persons[index]
          this.updateData.index = index
          this.updateData.name = name
          this.updateData.age = age
        },
        update() {
          const { name, index, age } = this.updateData
          this.persons[index].name = name
          this.persons[index].age = age
          this.showUpdate = false
        },
        deleteData(index) {
          this.persons.splice(index, 1)
        }
      }
    })

  </script>

</body>
</html>